<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>

<body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<!-- <script src="dist/fabric.brushes.js"></script>
<script src="dist/fabric.js"></script>"></script>
<script src="dist/brushes/crayonBrush.js"></script> -->
<script src="brushes/crayonBrush.js"></script>
<canvas id="canvas" width="800" height="600">

    
    <script>
        
    // const fabricCanvas = new fabric.Canvas('canvas', {
    //    isDrawingMode: true
    // });
    // fabricCanvas.freeDrawingBrush = new fabric.PencilBrush(fabricCanvas);
    // fabricCanvas.freeDrawingBrush.color = '#00f'; // 设置笔刷颜色
    // fabricCanvas.freeDrawingBrush.width = 30; // 设置笔刷宽度


    const fabricCanvas = new fabric.Canvas('canvas', {
       isDrawingMode: true
    });
    fabricCanvas.freeDrawingBrush = new fabric.PencilBrush(fabricCanvas,
{
	width: 30, // Width of brush
	color: '#000', // Color of brush
	opacity: 0.6 // Opacity of brush
});


    </script>


</body>

</html>